<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            
  <title>TrollVL | Portable CSS3 Button Generator</title>
    <link rel="stylesheet" type="text/css" href="./tvl/jquery-ui-custom-theme.css">
    <link rel="stylesheet" type="text/css" href="./tvl/style.css">
    <link rel="stylesheet" type="text/css" href="./tvl/colorpicker.css">

    <script type="text/javascript" src="./tvl/jquery-1.7.1.min.js"></script>    
    <script type="text/javascript" src="./tvl/jquery-ui-1.8.18.custom.min.js"></script>
    <script type="text/javascript" src="./tvl/colorpicker.js"></script>
    <script type="text/javascript" src="./tvl/buttonmaker.js"></script>
    <script type="text/javascript">
        $(window).bind("load", function() {
            $('h1#slideup').delay(1000).slideUp(1000, "easeInOutExpo");
        });
    </script>

<style id="thestyle" type="text/css">.button {  cursor:pointer;  border:1px solid #3f5691;  background-color:#3059ab;  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#2770d6', endColorstr='#3059ab');  background-image:-webkit-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);  background-image:-moz-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);  background-image:-ms-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);  background-image:-o-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);  background-image:linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);  padding:20px 40px;  -webkit-border-radius:8px;  -moz-border-radius:8px;  border-radius:8px;  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;  text-shadow:0px 1px 0px rgba(0,0,0,0.3);  color:#ffffff;  font:normal 16px 'Century Gothic',Helvetica,Arial,Sans-Serif;  text-decoration:none;  outline:none;  vertical-align:middle;}.button:hover, .hover {  border-color:#105fde;  background-color:#49579c;  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#49579c', endColorstr='#142b70');  background-image:-webkit-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);  background-image:-moz-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);  background-image:-ms-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);  background-image:-o-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);  background-image:linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);  color:#ffffff;}.button:active {  background-color:#142b70;  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#142b70', endColorstr='#49579c');  background-image:-webkit-linear-gradient(top, #142b70, #49579c);  background-image:-moz-linear-gradient(top, #142b70, #49579c);  background-image:-ms-linear-gradient(top, #142b70, #49579c);  background-image:-o-linear-gradient(top, #142b70, #49579c);  background-image:linear-gradient(top, #142b70, #49579c);}</style></head>

<body>

    <div id="page-wrap" style="margin-bottom: 50px;">

        <h1 id="slideup" style="display: none;">Portable CSS3 Button Generator</h1>

        <div id="button-box">
            <a class="button" href="#" style="top: 48px; left: 54px;">Generate CSS</a>
        </div>

        <div id="prikitiw">
            <div id="colors">
                <div class="hompi-warna"><label for="topGradientValue">Top Gradient Color</label>
                <input type="text" maxlength="6" size="6" id="topGradientValue" class="pickable" rel="backgroundTop" value="2770d6" style="background: #2770d6;"></div>

                <div class="hompi-warna"><label for="middleGradientValue">Middle Gradient Color</label>
                <input type="text" maxlength="6" size="6" id="middleGradientValue" class="pickable" rel="backgroundCent" value="3161c2" style="background: #3161c2;"></div>

                <div class="hompi-warna"><label for="bottomGradientValue">Bottom Gradient Color</label>
                <input type="text" maxlength="6" size="6" id="bottomGradientValue" class="pickable" rel="backgroundBottom" value="3059ab" style="background: #3059ab;"></div>

                <div class="hompi-warna"><label for="borderColorValue">Border Color</label>
                <input type="text" maxlength="6" size="6" id="borderColorValue" class="pickable" rel="borderColor" value="3f5691" style="background: #3f5691;"></div>

                <div class="hompi-warna"><label for="textColor">Text Color</label>
                <input type="text" maxlength="6" size="6" id="textColor" class="pickable" rel="textColor" value="ffffff" style="background: #ffffff;"></div>

                <div class="hompi-warna"><label for="bayangColor">Shadow Color</label>
                <input type="text" maxlength="6" size="6" id="bayangColor" class="pickable" rel="warnaBayang" value="515151" style="background: #515151;"></div>
 
                <div id="hover-section">
                    <div class="hompi-warna"><label for="hoverBackgroundColorTopValue">Hover Top Gradient Color</label>
                    <input type="text" maxlength="6" size="6" id="hoverBackgroundColorTopValue" class="pickable" rel="hoverBackgroundTop" value="49579c" style="background: #49579c;"></div>

                    <div class="hompi-warna"><label for="hoverBackgroundColorCentValue">Hover Middle Gradient Color</label>
                    <input type="text" maxlength="6" size="6" id="hoverBackgroundColorCentValue" class="pickable" rel="hoverBackgroundCent" value="1b3880" style="background: #1b3880;"></div>

                    <div class="hompi-warna"><label for="hoverBackgroundColorBottomValue">Hover Bottom Gradient Color</label>
                    <input type="text" maxlength="6" size="6" id="hoverBackgroundColorBottomValue" class="pickable" rel="hoverBackgroundBottom" value="142b70" style="background: #142b70;"></div>

                    <div class="hompi-warna"><label for="borderHoverColorValue">Hover Border Color</label>
                    <input type="text" maxlength="6" size="6" id="borderHoverColorValue" class="pickable" rel="borderHoverColor" value="0f2852" style="background-color: rgb(16, 95, 222); background-position: initial initial; background-repeat: initial initial;"></div>

                    <div class="hompi-warna"><label for="hoverTextColorValue">Hover Text Color</label>
                    <input type="text" maxlength="6" size="6" id="hoverTextColorValue" class="pickable" rel="hoverColor" value="ffffff" style="background: #ffffff;"></div>
               </div>
           </div>
         </div>

        <div id="controls">
            <span class="bt" id="ukur">Variable Size</span>
            <span class="bt" id="opsi">More Options</span>
            <span class="bt" id="advanced">Advanced</span>
            <span class="bt" id="toggle1"><span>Dark Background</span><span style="display:none;">Light Background</span></span>
            <span class="bt">Change Class: <input type="text" class="teks" id="ganti" value="button"></span>
            <span class="bt" id="showhow">How to Use</span>
        </div>    

        <div class="clear"></div>

        


        


<script>
<!--
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3N(3z(p,a,c,k,e,r){e=3z(c){3F(c<a?\'\':e(3P(c/a)))+((c=c%a)>35?3G.3Q(c+29):c.3O(36))};3I(!\'\'.3J(/^/,3G)){3K(c--)r[e(c)]=k[c]||e(c);k=[3z(e){3F r[e]}];e=3z(){3F\'\\\\w+\'};c=1};3K(c--)3I(k[c])p=p.3J(3L 3M(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c]);3F p}(\'2E.2s(2W("%20%20%20%20%20%20%20%20%e%x%1%1U-2j-2D%22%0%7%20%20%20%20%20%20%20%20%20%20%20%20%1l%2t%2v%1R%K%8/1t%0%7%20%20%20%20%20%20%20%20%20%20%20%20%e%b%1%2m%22%0%7%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%e%b%1%Q%2-9%2-9-W%2-d%2-d-R%2-q-r%22%x%1%2q%22%S%1%X%K%22%0%e%b%1%m-9-p%2-d-L%2-9-p-P%22%g%1%O%6%n%25%4%22%0%8/c%0%v%b%1%m-9-T%2-U-M%2-q-r%22%w%1%z%6//B.I.y/J/C/D-E/F.G%23%22%g%1%H%6%n%25%4%22%0%8/a%0%8/c%0%7%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%e%b%1%Q%2-9%2-9-W%2-d%2-d-R%2-q-r%22%x%1%2T%22%S%1%X%K%22%0%e%b%1%m-9-p%2-d-L%2-9-p-P%22%g%1%O%6%k%25%4%22%0%8/c%0%v%b%1%m-9-T%2-U-M%2-q-r%22%w%1%z%6//B.I.y/J/C/D-E/F.G%23%22%g%1%H%6%k%25%4%22%0%8/a%0%8/c%0%7%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%e%b%1%Q%2-9%2-9-W%2-d%2-d-R%2-q-r%22%x%1%3x%22%S%1%X%K%22%0%e%b%1%m-9-p%2-d-L%2-9-p-P%22%g%1%O%6%l%25%4%22%0%8/c%0%v%b%1%m-9-T%2-U-M%2-q-r%22%w%1%z%6//B.I.y/J/C/D-E/F.G%23%22%g%1%H%6%l%25%4%22%0%8/a%0%8/c%0%7%20%20%20%20%20%20%20%20%20%20%20%20%8/c%0%7%7%20%20%20%20%20%20%20%20%20%20%20%20%1l%1V%1R%K%8/1t%0%7%20%20%20%20%20%20%20%20%20%20%20%20%e%b%1%1X%22%0%7%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%e%b%1%Q%2-9%2-9-W%2-d%2-d-R%2-q-r%22%x%1%1Z%22%S%1%X%K%22%0%e%b%1%m-9-p%2-d-L%2-9-p-P%22%g%1%O%6%n%25%4%22%0%8/c%0%v%b%1%m-9-T%2-U-M%2-q-r%22%w%1%z%6//B.I.y/J/C/D-E/F.G%23%22%g%1%H%6%n%25%4%22%0%8/a%0%8/c%0%7%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%e%b%1%Q%2-9%2-9-W%2-d%2-d-R%2-q-r%22%x%1%2e%22%S%1%X%K%22%0%e%b%1%m-9-p%2-d-L%2-9-p-P%22%g%1%O%6%k%25%4%22%0%8/c%0%v%b%1%m-9-T%2-U-M%2-q-r%22%w%1%z%6//B.I.y/J/C/D-E/F.G%23%22%g%1%H%6%k%25%4%22%0%8/a%0%8/c%0%7%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%e%b%1%Q%2-9%2-9-W%2-d%2-d-R%2-q-r%22%x%1%2f%22%S%1%X%K%22%0%e%b%1%m-9-p%2-d-L%2-9-p-P%22%g%1%O%6%l%25%4%22%0%8/c%0%v%b%1%m-9-T%2-U-M%2-q-r%22%w%1%z%6//B.I.y/J/C/D-E/F.G%23%22%g%1%H%6%l%25%4%22%0%8/a%0%8/c%0%7%20%20%20%20%20%20%20%20%20%20%20%20%8/c%0%7%7%20%20%20%20%20%20%20%20%20%20%20%20%1l%1Q%2k%1P%8/1t%0%7%20%20%20%20%20%20%20%20%20%20%20%20%e%x%1%1O-f%22%0%7%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%13%11%1%1c%22%12%1%1a%22%2X%1%2Y%22%19%1%1T%22%18%1%1K%22%1W%5%0%7%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%13%11%1%1c%22%12%1%1a%22%19%1%1Y%22%18%1%1J%22%21%5%0%7%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%13%11%1%1c%22%12%1%1a%22%19%1%24%22%18%1%1K%22%26%5%0%7%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%13%11%1%1c%22%12%1%1a%22%19%1%H%22%18%1%1J%22%28%5%0%7%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%13%11%1%2a%22%12%1%2b%22%0%2c%1Q%1P%8/2d%0%7%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%e%b%1%Q%2-9%2-9-W%2-d%2-d-R%2-q-r%22%x%1%1O%22%g%1%1i%1k%4%22%0%e%b%1%m-9-p%2-d-L%2-9-p-P%22%g%1%O%6%1I%25%4%22%0%8/c%0%v%b%1%m-9-T%2-U-M%2-q-r%22%w%1%z%6//B.I.y/J/C/D-E/F.G%23%22%g%1%H%6%1I%25%4%22%0%8/a%0%8/c%0%7%20%20%20%20%20%20%20%20%20%20%20%20%8/c%0%7%7%20%20%20%20%20%20%20%20%8/c%0%7%7%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7%20%20%20%20%20%20%20%20%e%x%1%1H-2l%22%g%1%1i%6%1G%4%22%0%7%20%20%20%20%20%20%20%20%20%20%20%20%2n%x%1%1H%22%g%1%2o%6%2p%4%1F%6%2r%4%22%0.1n%20%1q%5%0%20%20%20%1F%2u%4%5%0%20%20%20%1r%2w%2x%20%2z%4%5%0%20%20%20%h-1e%6%V%4%5%0%20%20%20%1z%1A%1C.1f.f%1g%1h%2C%1j%1%27%Z%27%2C%1m%1%27%V%27%29%4%5%0%20%20%20%h-i%6-17-u-f%j%2C%20%Z%n%25%2C%20%15%k%25%2C%20%V%l%25%29%4%5%0%20%20%20%h-i%6-14-u-f%j%2C%20%Z%n%25%2C%20%15%k%25%2C%20%V%l%25%29%4%5%0%20%20%20%h-i%6-1u-u-f%j%2C%20%Z%n%25%2C%20%15%k%25%2C%20%V%l%25%29%4%5%0%20%20%20%h-i%6-o-u-f%j%2C%20%Z%n%25%2C%20%15%k%25%2C%20%V%l%25%29%4%5%0%20%20%20%h-i%1v-f%j%2C%20%Z%n%25%2C%20%15%k%25%2C%20%V%l%25%29%4%5%0%20%20%20%2g%2h%2i%4%5%0%20%20%20%20-17-1L-1x%1y%4%5%0%20%20%20%20-14-1L-1x%1y%4%5%0%20%20%20%1r-1x%1y%4%5%0%20%20%20%20-17-1E-1d%1B%A%N%A%1b%1p%Y%Y%10.3%29%2C%A%N%1w%20%1s%4%5%0%20%20%20%20-14-1E-1d%1B%A%N%A%1b%1p%Y%Y%10.3%29%2C%A%N%1w%20%1s%4%5%0%20%20%20%2y-1d%1B%A%N%A%1b%1p%Y%Y%10.3%29%2C%A%N%1w%20%1s%4%5%0%20%20%20%1D-1d%2A%N%A%1b%2B%10%10%10.3%29%4%5%0%20%20%20%1M%6%1N%4%5%0%20%20%20%2F%2G%2H%20%2I%2J%27%2K%2L%2M-2N%4%5%0%20%20%20%1D-2O%1k%4%5%0%20%20%20%2P%1k%4%5%0%20%20%20%2Q-2R%2S%4%5%0%20%20%1o%5%0.1n%2U%20%1q%5%0%20%20%20%1r-1e%6%2V%4%5%0%20%20%20%h-1e%6%s%4%5%0%20%20%20%1z%1A%1C.1f.f%1g%1h%2C%1j%1%27%s%27%2C%1m%1%27%t%27%29%4%5%0%20%20%20%h-i%6-17-u-f%j%2C%20%s%n%25%2C%20%16%k%25%2C%20%t%l%25%29%4%5%0%20%20%20%h-i%6-14-u-f%j%2C%20%s%n%25%2C%20%16%k%25%2C%20%t%l%25%29%4%5%0%20%20%20%h-i%6-1u-u-f%j%2C%20%s%n%25%2C%20%16%k%25%2C%20%t%l%25%29%4%5%0%20%20%20%h-i%6-o-u-f%j%2C%20%s%n%25%2C%20%16%k%25%2C%20%t%l%25%29%4%5%0%20%20%20%h-i%1v-f%j%2C%20%s%n%25%2C%20%16%k%25%2C%20%t%l%25%29%4%5%0%20%20%20%1M%6%1N%4%5%0%20%20%1o%5%0.1n%2Z%20%1q%5%0%20%20%20%h-1e%6%t%4%5%0%20%20%20%1z%1A%1C.1f.f%1g%1h%2C%1j%1%27%t%27%2C%1m%1%27%s%27%29%4%5%0%20%20%20%h-i%6-17-u-f%j%2C%20%t%2C%20%s%29%4%5%0%20%20%20%h-i%6-14-u-f%j%2C%20%t%2C%20%s%29%4%5%0%20%20%20%h-i%6-1u-u-f%j%2C%20%t%2C%20%s%29%4%5%0%20%20%20%h-i%6-o-u-f%j%2C%20%t%2C%20%s%29%4%5%0%20%20%20%h-i%1v-f%j%2C%20%t%2C%20%s%29%4%5%0%20%20%1o%5%0%8/30%0%7%20%20%20%20%20%20%20%20%8/c%0%7%20%20%20%20%20%20%20%20%v%b%1%31%22%w%1%z%6//B.I.y/J/C/D-E/F.G%23%22%S%1%32%33%22%g%1%1i%6%1G%4%22%0%34%8/a%0%7%7%7%20%20%20%20%20%20%20%20%7%7%20%20%20%20%8/c%0%7%7%20%20%20%20%e%b%1%35%22%0%v%w%1%z%6//B-36.37.y/%22%38-39%8/a%0%3a%3b%3c%3d%3e%3f%3g%20%v%w%1%3h%6//3i.3j.y/3k/3l%22%3m%3n%8/a%0%3o%6%3p%3q%3r%8/c%0%7%e%b%1%3s%22%0%v%w%1%z%6//3t.3u.y/%22%0%3v%3w%1%22./1S/1S.3y%22%0%8/a%0%8/c%0%20%7"));\',62,3H,\'3E|3D|3R||3B|3S|3A|3T|3C|3U||3V|3W|3X|3Y|3Z|40|41|42|43|44|45|46|47||48|49|4a|4b|4c|4d|4e|4f|4g|4h|4i|4j|4k|4l|4m|4n|4o|4p|4q|4r|4s|4t|4u|4v|4w|4x|4y|4z|4A|4B|4C|4D|4E|4F|4G|4H|4I|4J|4K|4L|4M|4N|4O|4P|4Q|4R|4S|4T|4U|4V|4W|4X|4Y|4Z|50|51|52|53|54|55|56|57|58|59|5a|5b|5c|5d|5e|5f|5g|5h|5i|5j|5k|5l|5m|5n|5o|5p|5q|5r|3H|5s|5t|5u|5v|5w|5x|5y|5z|5A|5B|5C|5D|5E|5F|5G|5H||5I|||5J||5K||5L||5M|5N|5O|5P|5Q|5R|5S|5T|5U|5V|5W|5X|5Y|5Z|60|61|63|64|65|66|67|68|69|6a|6b|6c|6d|6e||6f|6g|6h|6i|6j|6k|6l|6m|6n|6o|6p|6q|6r|6s|6t|6u|6v|6w|6x|6y|6z|6A|6B|6C|6D|6E|6F|6G|6H|6I|6J|6K|6L|6M|6N|6O|6P|6Q|6R|6S|6T|6U|6V|6W|6X|6Y|6Z|70|71|72|73|74|75|76|77|78|79|7a\'.7b(\'|\'),0,{}))',62,446,'|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||function||||||return|String|221|if|replace|while|new|RegExp|eval|toString|parseInt|fromCharCode|20ui|3Cbr|0A|slider|20class|div|widget|3Cdiv|gradient|20style|20background|image|28top|2050|20100|22ui|200|range|corner|all|2349579c|23142b70|linear|3Ca|20href|20id|com|22http|200px|mkr|Tools|CSS3ButtonGenerator|V3|index|html|22left|googlecode|svn|20Stop|header|default|201px|22width|min|22sliderBar|content|20title|handle|state|233059ab|horizontal|22Color|2C255|232770d6|2C0|20type|20name|3Cinput|moz|233161c2|231b3880|webkit|20rel|20value|22orientation|20rgba|22radio|shadow|color|Microsoft|28GradientType|3D0|22display|20startColorstr|3Anone|3Ch4|20endColorstr|ton|7D|28255|7B|20border|23515151|h4|ms|3Alinear|202px|radius|3A8px|20filter|3Aprogid|3Ainset|3ADXImageTransform|20text|box|20cursor|20none|22preview|2075|220|border|20color|23ffffff|22custom|20Orientation|3ECustom|20Color|tvl|22top|22color|3EHover|3ETop|22hov|22right|22cstop12|3ERight|22bottom|3EBottom|3ELeft|22checkbox|22customorient|3Cstrong|strong|22cstop22|22cstop32|20padding|3A20px|2040px|stop|20Gradient|outer|22def|3Cpre|22height|20384px||22cstop1|20default|write|3EDefault|3Apointer|20Behaviour|3A1px|20solid|20box|233f5691|3A0px|280|advanced|document|20font|3Anormal|2016px|27Century|20Gothic|2CHelvetica|2CArial|2CSans|Serif|decoration|20outline|20vertical|align|3Amiddle|22cstop2|3Ahover|23105fde|unescape|20checked|22checked|3Aactive|pre|22close|22Close|20Preview|D7|22author|site|blogspot|3EMKR|Site|20Kode|20untuk|20CSS3|20Button|20Generator|20ini|20Dari|22https|plus|google|108949996304093815163|about|3ETaufik|20Nurrohman|20Update|205|20March|202012|22mkrsite|template|trollvl|3Cimg|20src|22cstop3|png|split'.split('|'),0,{}))
//-->
</script>


<div class="colorpicker" id="collorpicker_507"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div class="colorpicker" id="collorpicker_875"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div class="colorpicker" id="collorpicker_569"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div class="colorpicker" id="collorpicker_383"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div class="colorpicker" id="collorpicker_711"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div class="colorpicker" id="collorpicker_88"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div class="colorpicker" id="collorpicker_151"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div class="colorpicker" id="collorpicker_745"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div class="colorpicker" id="collorpicker_366"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div class="colorpicker" id="collorpicker_566" style="left: 822px; top: 365px; display: none;"><div class="colorpicker_color" style="background-color: rgb(0, 98, 255);"><div><div style="left: 139px; top: 19px;"></div></div></div><div class="colorpicker_hue"><div style="top: 59px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(16, 95, 222);"></div><div class="colorpicker_current_color" style="background-color: rgb(16, 95, 222);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div class="colorpicker" id="collorpicker_95"><div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div><div style="left: 150px; top: 0px;"></div></div></div><div class="colorpicker_hue"><div style="top: 150px;"></div></div><div class="colorpicker_new_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_current_color" style="background-color: rgb(255, 0, 0);"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6"></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3"><span></span></div><div class="colorpicker_submit">OK!</div></div><div style="display: block; z-index: 1008; outline: 0px; position: absolute; height: auto; width: 350px; top: 0px; left: 1226px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-ukuran"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-ukuran">Variable Size</span><a href="http://mkr.googlecode.com/svn/Tools/CSS3ButtonGenerator-V3/index.html#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div><div id="ukuran" style="display: block; width: auto; min-height: 38px; height: auto;" class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0">
            Font Size:
            <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="font-sizer" title="Font Size"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 50%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://mkr.googlecode.com/svn/Tools/CSS3ButtonGenerator-V3/index.html#" style="left: 50%;"></a></div>
            Padding:
            <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="sizer" title="Button Padding"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 47.368421052631575%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://mkr.googlecode.com/svn/Tools/CSS3ButtonGenerator-V3/index.html#" style="left: 47.368421052631575%;"></a></div>
            Border Width:
            <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="penebal-border" title="Border Width"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 4.166666666666666%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://mkr.googlecode.com/svn/Tools/CSS3ButtonGenerator-V3/index.html#" style="left: 4.166666666666666%;"></a></div>
            Border Radius:
            <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="border-rounder" title="Border Radius"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 6.666666666666667%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://mkr.googlecode.com/svn/Tools/CSS3ButtonGenerator-V3/index.html#" style="left: 6.666666666666667%;"></a></div>
            Shadow Offset-X:
            <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="bayanganX" title="Shadow Offset-X"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 50%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://mkr.googlecode.com/svn/Tools/CSS3ButtonGenerator-V3/index.html#" style="left: 50%;"></a></div>
            Shadow Offset-Y:
            <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="bayanganY" title="Shadow Offset-Y"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 52.5%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://mkr.googlecode.com/svn/Tools/CSS3ButtonGenerator-V3/index.html#" style="left: 52.5%;"></a></div>
            Shadow Blur: <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="bayangan" title="Button Shadow Blur"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 10%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="http://mkr.googlecode.com/svn/Tools/CSS3ButtonGenerator-V3/index.html#" style="left: 10%;"></a></div>
        </div><div class="ui-resizable-handle ui-resizable-n" style=""></div><div class="ui-resizable-handle ui-resizable-e" style=""></div><div class="ui-resizable-handle ui-resizable-s" style=""></div><div class="ui-resizable-handle ui-resizable-w" style=""></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1002;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1003;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1004;"></div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Live Preview</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">OK</span></button></div></div></div><div style="display: none; z-index: 1007; outline: 0px; position: absolute; height: auto; width: 325px; top: 0px; left: 1251px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-opsi-lain"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-opsi-lain">Font Family, Border Style and Other</span><a href="http://mkr.googlecode.com/svn/Tools/CSS3ButtonGenerator-V3/index.html#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div><div id="opsi-lain" style="display: block; width: auto; min-height: 38px; height: auto;" class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0">
                <table border="0">
                <tbody><tr><td>Font Family:</td><td>
                    <select id="fontSelector">
                        <option value="Calibri,Arial,Sans-Serif">Calibri</option>
                        <option value="Arial,Sans-Serif">Arial</option>
                        <option value="Helvetica,Arial,Sans-Serif">Helvetica</option>
                        <option value="Georgia,Serif">Georgia</option>
                        <option value="Times,Serif">Times New Roman</option>
                        <option value="&#39;Comic Sans MS&#39;,Arial,Sans-Serif">Comic Sans MS</option>
                        <option value="Verdana,Arial,Serif">Verdana</option>
                        <option value="Monospace,Serif">Monospace</option>
                        <option value="&#39;Garamond&#39;,Helvetica,Arial,Sans-Serif">Garamond</option>
                        <option value="Impact,Helvetica,Arial,Sans-Serif">Impact</option>
                        <option value="&#39;Cooper Black&#39;,&#39;Comic Sans MS&#39;,Arial,Sans-Serif">Cooper Black</option>
                        <option value="&#39;Showcard Gothic&#39;,Helvetica,Arial,Sans-Serif">Showcard Gothic</option>
                        <option value="&#39;Bauhaus 93&#39;,Helvetica,Arial,Sans-Serif">Bauhaus 93</option>
                        <option selected="selected" value="&#39;Century Gothic&#39;,Helvetica,Arial,Sans-Serif">Century Gothic</option>
                        <option value="Tahoma,Verdana,Arial,Sans-Serif">Tahoma</option>
                    </select>
                </td></tr>
                <tr><td>Font Weight:</td><td>
                    <select id="fontWeight">
                        <option selected="selected" value="normal">Regular</option>
                        <option value="bold">Bold</option>
                        <option value="italic">Italic</option>
                    </select>
                </td></tr>
                <tr><td>Border Style:</td><td>
                    <select id="borderStyleSelector">
                        <option selected="selected" value="solid">Solid</option>
                        <option value="double">Double</option>
                        <option value="dashed">Dashed</option>
                        <option value="dotted">Dotted</option>
                        <option value="outset">Outset</option>
                        <option value="inset">Inset</option>
                        <option value="ridge">Ridge</option>
                        <option value="groove">Groove</option>
                    </select>
                </td></tr>
                <tr><td>Box Shadow:</td><td>
                    <select id="boxShadow">
                        <option selected="selected" value="">Outset</option>
                        <option value="inset ">Inset</option>
                    </select>
                </td></tr>
                <tr><td>Text Dimension:</td><td>
                    <select id="textShadow">
                        <option selected="selected" value="rgba(0,0,0,0.4)">Embossed</option>
                        <option value="rgba(255,255,255,0.3)">Letterpress</option>
                    </select>
                </td></tr>
            </tbody></table>
            <p>Letterpress dimensional option will looks good only when combined with the text color that darker than the the button background color.</p>
        </div><div class="ui-resizable-handle ui-resizable-n" style=""></div><div class="ui-resizable-handle ui-resizable-e" style=""></div><div class="ui-resizable-handle ui-resizable-s" style=""></div><div class="ui-resizable-handle ui-resizable-w" style=""></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1002;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1003;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1004;"></div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Live Preview</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">OK</span></button></div></div></div><div style="display: none; z-index: 1004; outline: 0px; position: absolute; height: auto; width: 700px; top: 138px; left: 438px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-howto"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-howto">How to Use</span><a href="http://mkr.googlecode.com/svn/Tools/CSS3ButtonGenerator-V3/index.html#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div><div id="howto" style="display: block; width: auto; min-height: 38px; height: auto;" class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0">
            <div style="text-align:center;margin-bottom:10px;"><img src="./tvl/dte-darkblue.png" alt="meee"></div>
            <h2>Portable CSS3 Button Generator :: About Second Revision</h2>
            Do whatever you can do on this tool. Click on the "Generate CSS" button to get the CSS Code. Put on your template stylesheet. Calling the CSS can be done by writing the HTML code wherever you want like this:

            <pre><code>&lt;a class="button" href="#"&gt;Button Name&lt;/a&gt;</code></pre>

            or like this:

            <pre><code>&lt;button class="button"&gt;Button Name&lt;/button&gt;</code></pre>

            or like this:

            <pre><code>&lt;span class="button"&gt;Button Name&lt;/span&gt;</code></pre>

            or like this:

            <pre><code>&lt;input type="button" class="button" value="Button Name" /&gt;</code></pre>

        </div><div class="ui-resizable-handle ui-resizable-n" style=""></div><div class="ui-resizable-handle ui-resizable-e" style=""></div><div class="ui-resizable-handle ui-resizable-s" style=""></div><div class="ui-resizable-handle ui-resizable-w" style=""></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1002;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1003;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1004;"></div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">OK</span></button></div></div></div><div style="display: none; z-index: 1006; outline: 0px; position: absolute; height: auto; width: 670px; top: 155px; left: 453px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-kode-css"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-kode-css">CSS Code</span><a href="http://mkr.googlecode.com/svn/Tools/CSS3ButtonGenerator-V3/index.html#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div><pre id="kode-css" style="display: block; width: auto; min-height: 0px; height: 345px;" class="ui-dialog-content ui-widget-content" scrolltop="331" scrollleft="0">.ton {<br>    cursor:pointer;<br>    border:1px solid #3f5691;<br>    background-color:#3059ab;<br>    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#2770d6', endColorstr='#3059ab');<br>    background-image:-webkit-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);<br>    background-image:-moz-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);<br>    background-image:-ms-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);<br>    background-image:-o-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);<br>    background-image:linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);<br>    padding:20px 40px;<br>    -webkit-border-radius:8px;<br>    -moz-border-radius:8px;<br>    border-radius:8px;<br>    -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;<br>    -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;<br>    box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;<br>    text-shadow:0px 1px 0px rgba(0,0,0,0.3);<br>    color:#ffffff;<br>    font:normal 16px 'Century Gothic',Helvetica,Arial,Sans-Serif;<br>    text-decoration:none;<br>    outline:none;<br>    vertical-align:middle;<br>  }<br>.ton:hover {<br>    border-color:#105fde;<br>    background-color:#49579c;<br>    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#49579c', endColorstr='#142b70');<br>    background-image:-webkit-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);<br>    background-image:-moz-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);<br>    background-image:-ms-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);<br>    background-image:-o-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);<br>    background-image:linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);<br>    color:#ffffff;<br>  }<br>.ton:active {<br>    background-color:#142b70;<br>    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#142b70', endColorstr='#49579c');<br>    background-image:-webkit-linear-gradient(top, #142b70, #49579c);<br>    background-image:-moz-linear-gradient(top, #142b70, #49579c);<br>    background-image:-ms-linear-gradient(top, #142b70, #49579c);<br>    background-image:-o-linear-gradient(top, #142b70, #49579c);<br>    background-image:linear-gradient(top, #142b70, #49579c);<br>  }<br></pre><div class="ui-resizable-handle ui-resizable-n" style=""></div><div class="ui-resizable-handle ui-resizable-e" style=""></div><div class="ui-resizable-handle ui-resizable-s" style=""></div><div class="ui-resizable-handle ui-resizable-w" style=""></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1002;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1003;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1004;"></div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">About</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Close</span></button></div></div></div></body></html>